<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>天气案例_监视属性简写</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}, {{x}}</h2>

        <button @click="changeWheter">切换天气</button><br/>

        

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止 vue在启动时生成生产提示    
        // 创建vue实例
        const vm = new Vue({
            el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data: { //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                firstName: '徐',
                lastName: '亚远',
                isHot: true,
                x:1,
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                changeWheter() {
                    this.x++
                    this.isHot = !this.isHot
                }
            },

            // 监视属性的第一种写法  new Vue()时传入watch配置
            watch: {
                // 正常写法
                // isHot: {      // info也可以被监视
                //     // immediate: true, //初始化时让handler调用一下
                //     // deep:true, //深度监视
                //     // handler什么时候调用？当isHot发生改变时
                //     handler(newValue, oldValue) {
                //         console.log('isHot被修改了', newValue, oldValue)
                //     }
                // },

                // 简写
                isHot(newValue, oldValue){
                    console.log('简写形式   isHot被修改了', newValue, oldValue)

                }

            }
        })
            // 正常写法
            // vm.$watch('isHot', {
            //     immediate:true,
            //     deep:true,
            //     handler(newValue, oldValue){
            //         console.log('isHot被修改了', newValue, oldValue)
            //     }
            // })

            // 简写
            // vm.$watch('isHot', function(newValue, oldValue){
            //     console.log('简写 isHot被修改了', newValue, oldValue)
            // })


    </script>


</body>

</html>